<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajout d'un nouvel élève</title>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="<c:url value ='/ressources/css/style.css'/>" />
<link rel="stylesheet" href="ressources/bootstrapValidator/vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="ressources/bootstrapValidator/dist/css/formValidation.css" />


<!-- Alertify stylesheets ! -->
<link type="text/css" rel="stylesheet" href="<c:url value ='ressources/alertify.js-0.3.11/themes/alertify.core.css'/>" />
<link type="text/css" rel="stylesheet" href="<c:url value ='ressources/alertify.js-0.3.11/themes/alertify.default.css'/>" />





<style type="text/css">

h4 { 
	font-family: 'Oswald', sans-serif;

}

</style>


<!-- Latest compiled and minified CSS -->

<%-- <script src="<c:url value ='/ressources/js/framework/bootstrap/bootstrap.min.js'/>" ></script> --%>

<script type="text/javascript" src="ressources/bootstrapValidator/vendor/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="ressources/bootstrapValidator/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="ressources/bootstrapValidator/dist/js/formValidation.js"></script>
<script type="text/javascript" src="ressources/bootstrapValidator/dist/js/framework/bootstrap.js"></script>


<%-- <script src="<c:url value ='/ressources/js/framework/bootstrap/bootstrap.js'/>"></script> --%>


	<script src="<c:url value ='ressources/alertify.js-0.3.11/lib/alertify.min.js'/>" ></script>


<!-- Optional theme -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> -->

<!-- Latest compiled and minified JavaScript -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> -->



</head>
<body>
	<c:import url="horizontalNavMenu.jsp"></c:import>


	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<div class=" panel panel-default">
					<!-- Default panel contents -->
					<div class="panel-heading">
						<h4>Ajout d'un nouvel éléve</h4>
					</div>
			
					<form:form id="formAjouterEleve" role="form" method="POST" action="ajouterEleve" modelAttribute="eleve" class="form-horizontal container">
						<div class="row">
						<div class="container">
							<div class="col-sm-6">
								<fieldset>
									<legend>Informations Eleve</legend>
									<div class="col-sm-12">

										<div class="form-group">
											<label class="col-sm-4 control-label" for="nomEleve">Nom</label>
											<div class="col-sm-6">
												<form:input path="nom" id="nomEleve" required="true" class="form-control input-md" />
												<form:errors path="nom" Class="error" />
											</div>
										
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="prenomEleve">Prénom </label>
											<div class="col-sm-6">
												<form:input path="prenom" id="prenomEleve" required="true" class="form-control input-md" />
												<form:errors path="prenom" cssClass="error" />
											</div>
											
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="ageEleve">Age </label>
											<div class="col-sm-6">
												<form:input path="age" id="ageEleve" type="number" required="true" class="form-control input-md" />
												<form:errors path="age" cssClass="error" />
											</div>
											
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="adresseEleve">Adresse </label>
											<div class="col-sm-6">
												<form:input path="adresse" id="adresseEleve" required="true" placeholder="6, allée Louis Jouvet, 93380 Pierrefitte" class="form-control input-md" />
												<form:errors path="adresse" cssClass="error" />
											</div>
											
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="telephoneEleve">Numéro de téléphone </label>
											<div class="col-sm-6">
												<div class="input-group">
													<span class="input-group-addon"> <span class="glyphicon glyphicon-phone-alt"></span></span>
													<form:input path="telephone" id="telephoneEleve" required="true" placeholder="06 40 39 06 12" class="form-control input-md" />
												</div>
												<form:errors path="telephone" cssClass="error" />
											</div>
											
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="emailEleve">Adresse email </label>
											<div class="col-sm-6">
												<div class="input-group">
													<span class="input-group-addon"> <span class="glyphicon glyphicon-envelope"></span>
													</span>
													<form:input type="email" path="email" id="emailEleve" required="true" placeholder="asambe@capgemini.com" class="form-control input-md" />
												</div>
												<form:errors path="email" cssClass="error" />
											</div>
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="nomEleve">Matricule</label>
											<div class="col-sm-6">
												<form:input type="number" path="matricule" id="matriculeEleve" required="true" class="form-control input-md" />
												<form:errors path="matricule" Class="error" />
											</div>
											
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="image">Image</label>
											<div class="col-sm-6">
												<form:input type="file" path="photo" id="image" class="input-file" disabled="disabled" />
												<form:errors path="photo" cssClass="error" />
											</div>
											
										</div>
									</div>
								</fieldset>
							</div>
					

							<div class="col-sm-6">

								<fieldset>
									<legend>Informations Tuteur</legend>
									<div class="col-sm-12">

										<div class="form-group">
											<label class="col-sm-4 control-label" for="nomtuteur">Nom </label>
											<div class="col-sm-6">
												<form:input path="tuteur.nom" id="nomTuteur" required="true" class="form-control input-md" />
												<form:errors path="tuteur.nom" cssClass="error" />
											</div>			
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="prenomTuteur">Prénom </label>
											<div class="col-sm-6">
												<form:input path="tuteur.prenom" id="prenomTuteur" required="true" class="form-control input-md" />
												<form:errors path="tuteur.prenom" cssClass="error" />
											</div>		
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="adresseTuteur">Adresse </label>
											<div class="col-sm-6">
												<form:input path="tuteur.adresse" id="adresseTuteur" required="true" placeholder="6, allée Louis Jouvet, 93380 Pierrefitte" class="form-control input-md" />
												<form:errors path="tuteur.adresse" cssClass="error" />
											</div>
											
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="telephoneTuteur">Numéro de téléphone </label>
											<div class="col-sm-6">
												<div class="input-group">
													<span class="input-group-addon"> <span class="glyphicon glyphicon-phone-alt"></span></span>
													<form:input path="tuteur.telephone" id="telephoneTuteur" required="true" placeholder="06 40 39 06 12" class="form-control input-md" />
												</div>
												<form:errors path="tuteur.telephone" cssClass="error" />
											</div>
											
										</div>

										<div class="form-group">
											<label class="col-sm-4 control-label" for="emailTuteur">Adresse email </label>
											<div class="col-sm-6">
												<div class="input-group">
													<span class="input-group-addon"> <span class="glyphicon glyphicon-envelope"></span></span>
													<form:input type="email" path="tuteur.email" id="emailTuteur" required="true" placeholder="asambe@capgemini.com" class="form-control input-md" />
												</div>
												<form:errors path="tuteur.email" cssClass="error" />
											</div>		
										</div>


									
									</div>
								</fieldset>
										<br>
										<br>
										<div class="form-group">
											<label class="col-sm-4 control-label" for="addButton">Ajouter </label>
											<div class="col-sm-6">
											<div class="input-group">
												<button type="submit" id="addButton" name="addButton" class="btn btn-primary">Valider</button>
											</div>
											</div>
										
										</div>
							</div>
							<div class="clearfix visible-sm"></div>
							</div>
						</div>
					</form:form>
				</div>
			</div>
		</div>
	</div>

	


	<script type="text/javascript">
		$(document).ready(function() {
			$('#formAjouterEleve').bootstrapValidator({
				excluded : ':disabled',
				message : 'This value is not valid',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					nom : {
						validators : {
							notEmpty : {
								message : 'Veuillez renseigner ce champ.'
							},
						stringLength: {
			                   	min: 2,
			                   	message: 'Le nom doit comporter au moins 2 caractères.'
			                }
						}
					},
					prenom : {
						validators : {
							notEmpty : {
								message : 'Veuillez renseigner ce champ.'
							},
						stringLength: {
			                   	min: 2,
			                   	message: 'Le nom doit comporter au moins 2 caractères.'
			                }
						}
					},
					age : {
						validators : {
							notEmpty : {
								message : 'Veuillez renseigner ce champ.'
							},
							integer : {
								message : "La valeur saisie n'est pas valide."
							}
						

						}
					},
					adresse : {
						validators : {
							notEmpty : {
								message : 'Veuillez renseigner ce champ.'
							}
						}
					},
					matricule : {
						validators : {
							integer : {
								message : "La valeur saisie n'est pas valide."
							},
							notEmpty : {
								message : 'Veuillez renseigner ce champ.'
							}

						}
					}
				}
			});
			
		});
	</script>



		<script type="text/javascript">
		$(document).ready(function() {
			$("#addButto").click(function () {
				alertify.success("Success log message");
				return false;
			});
		});
	
	</script>	















	<%-- <div class="main">
				<section>
					<h2>Slide Menus</h2>
					<!-- Class "cbp-spmenu-open" gets applied to menu -->
					<button id="showLeft">Show/Hide Left Slide Menu</button>
					<button id="showRight">Show/Hide Right Slide Menu</button>
					<button id="showTop">Show/Hide Top Slide Menu</button>
					<button id="showBottom">Show/Hide Bottom Slide Menu</button>
				</section>
				<section class="buttonset">
					<h2>Push Menus</h2>
					<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
					<button id="showLeftPush">Show/Hide Left Push Menu</button>
					<button id="showRightPush">Show/Hide Right Push Menu</button>
				</section>
			</div>
			
					<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
		<script src="<c:url value ='/ressources/js/classie.js'/>" ></script>
		<script>
			var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
				menuRight = document.getElementById( 'cbp-spmenu-s2' ),
				menuTop = document.getElementById( 'cbp-spmenu-s3' ),
				menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
				showLeft = document.getElementById( 'showLeft' ),
				showRight = document.getElementById( 'showRight' ),
				showTop = document.getElementById( 'showTop' ),
				showBottom = document.getElementById( 'showBottom' ),
				showLeftPush = document.getElementById( 'showLeftPush' ),
				showRightPush = document.getElementById( 'showRightPush' ),
				body = document.body;

			showLeft.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuLeft, 'cbp-spmenu-open' );
				disableOther( 'showLeft' );
			};
			showRight.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuRight, 'cbp-spmenu-open' );
				disableOther( 'showRight' );
			};
			showTop.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuTop, 'cbp-spmenu-open' );
				disableOther( 'showTop' );
			};
			showBottom.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuBottom, 'cbp-spmenu-open' );
				disableOther( 'showBottom' );
			};
			showLeftPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toright' );
				classie.toggle( menuLeft, 'cbp-spmenu-open' );
				disableOther( 'showLeftPush' );
			};
			showRightPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toleft' );
				classie.toggle( menuRight, 'cbp-spmenu-open' );
				disableOther( 'showRightPush' );
			};

			function disableOther( button ) {
				if( button !== 'showLeft' ) {
					classie.toggle( showLeft, 'disabled' );
				}
				if( button !== 'showRight' ) {
					classie.toggle( showRight, 'disabled' );
				}
				if( button !== 'showTop' ) {
					classie.toggle( showTop, 'disabled' );
				}
				if( button !== 'showBottom' ) {
					classie.toggle( showBottom, 'disabled' );
				}
				if( button !== 'showLeftPush' ) {
					classie.toggle( showLeftPush, 'disabled' );
				}
				if( button !== 'showRightPush' ) {
					classie.toggle( showRightPush, 'disabled' );
				}
			}
		</script> --%>
</body>
</html>